<template>
  <div class="process1">
    <div class="finger" v-show="finger1">
      点击这里
      <img src="@/static/finger.svg" alt="">
    </div>
    <div class="fingerbtn" v-show="finger2">
      点击这里
      <img src="@/static/finger.svg" alt="">
    </div>
    <img @click="back" src="@/static/error.png" class="baoxiangstyle" alt="">
    <div class="answer" @click="audioRef.play();finger1=false;finger2=true;">{{ store.topics[store.nowtopic - 1].answerPath }}</div>
    <audio ref="audioRef" @ended="back"
      :src="`${config.voiceTarget}/sounds/${store.topics[store.nowtopic - 1].answerPath}。.mp3`"></audio>

  </div>
</template>

<script setup>
import config from '../../config/config.js'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api/user'
const router = useRouter();
const baoxiangstyle = ref("baoxiang roate");
const rewarddetailstyle = ref("");
import { useAuthStore } from '../../store/index';
const store = useAuthStore();
const audioRef = ref(null);
const finger1 = ref(true);
const finger2 = ref(false);
onMounted(() => {
  console.log(store.topics[store.nowtopic - 1].answerPath);


})
const entersmall = () => {
  audioRef.value.play();
}
const back = () => {
  router.push({
    path: "/game",
    query: {
      processnum: store.topics[0].levelId
    }
  })
}
</script>

<style lang="scss" scoped>
.answer {
  height: 6rem;
  width: 30rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  background-color: #ffc33d;
  border-radius: 0.5rem;
  margin-top: 2rem;
}

.fingerbtn {
  position: absolute;
  display: flex;
  left: 14rem;
  top: 10rem;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;

  img {
    transform: rotate(135deg);
  }
}

.finger {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-20rem, -15rem);
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: red;
  font-weight: 900;

  img {
    transform: rotate(135deg);
  }
}

.process1 {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('@/static/processback.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  .baoxiang {
    width: 30rem;
    height: 20rem;

    &.disappear {
      animation: fadeOut 0.5s forwards;
    }
  }

  .roate {
    animation: rotate 1s infinite;
  }


  .awardword {
    // position: absolute;

    margin: 0 auto;
    border: #875a44 solid 4px;
    font-size: 3rem;
    background-color: #fbe8a3;
  }
}
</style>
